<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common_header :: common_header(~{::title},~{::link},~{})">
    <title>规格参数</title>
    <link href="js/jquery-confirm/jquery-confirm.min.css" th:href="@{/js/jquery-confirm/jquery-confirm.min.css}" rel="stylesheet">

    <!-- 富文本编辑器 -->
    <link th:href="@{/js/summernote/summernote.css}" rel="stylesheet">
</head>
<body>
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-toolbar d-flex flex-column flex-md-row">
                <div class="toolbar-btn-action">
                    <a class="btn btn-primary m-r-5 btn-xs" onclick="addParam()" href="#!"><i class="mdi mdi-plus"></i> 新增</a>
                    <a class="btn btn-danger m-r-5 btn-xs" onclick="batchDels()" href="#!"><i class="mdi mdi-block-helper"></i> 删除</a>
                </div>

                <form class="search-bar ml-md-auto" method="get" action="#!" role="form">
                    <input type="hidden" name="search_field" id="search-field" value="title" />
                    <div class="input-group ml-md-auto">
                        <div class="input-group-prepend">
                            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="search-btn">标题</button>
                            <div class="dropdown-menu" style="">
                                <a class="dropdown-item" href="#!" data-field="title">标题</a>
                                <a class="dropdown-item" href="#!" data-field="cat_name">栏目</a>
                            </div>
                        </div>
                        <input type="text" class="form-control" name="keyword" placeholder="请输入名称">
                    </div>
                </form>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="goods_table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="common/common_foot :: foot"></div>
<script type="text/javascript" src="js/jquery-confirm/jquery-confirm.min.js" th:src="@{/js/jquery-confirm/jquery-confirm.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table/bootstrap-table.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script type="text/javascript" th:src="@{/js/layer/layer.js}"></script>
<script>
    var TableInit = function () {
        var oTableInit = {};
        //初始化Table
        oTableInit.Init = function () {
            $('#goods_table').bootstrapTable({
                locale: 'zh-CN',
                url: '/itemParam/list',         //请求后台的URL（*）
                method: 'post',                      //请求方式（*）
                async:  true,                        //true表示执行到这,ajax向后台发起访问,在等待响应的这段时间里,继续执行下面的代码
                                                     //设置为true,基本都是后面的代码(除非还有ajax)先执行
                // toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                paginationPreText:'<',              //上一页按钮样式
                paginationNextText:'>',             //下一页按钮样式
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 12,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                contentType: "application/x-www-form-urlencoded",   //重要选项,必填
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                //height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数决定表格高度,最好不要设置这个属性
                uniqueId: "no",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [
                    {
                        checkbox: true,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'id',
                        title: 'ID',
                        align: 'center',
                        sortable: true,
                        editable: {
                            mode: 'inline'
                        }
                    },
                    {

                        field: 'itemCatId',
                        align: 'center',
                        title: '商品类目'
                    },
                    {

                        field: 'itemCatName',
                        align: 'center',
                        title: '类目名称'
                    },
                    {
                        field: 'paramData',
                        align: 'center',
                        title: '规格(只显示分组名称)',
                        formatter:function (value,row,index)
                        {
                            var param = row.paramData
                            var jsonArr = JSON.parse(param)
                            var text = "";
                            for (let i = 0; i < jsonArr.length; i++) {
                                text += jsonArr[i].group + ","
                            }
                            return text;
                        }
                    },
                    {
                        field: 'created',
                        align: 'center',
                        title: '创建时间',
                        formatter : function (value, row, index) {
                            return formatDate(row.created)
                        }
                    },
                    {
                        field: 'operate',
                        title: '操作',
                        align: 'center',
                        formatter: btnGroup, // 自定义方法
                        events:{
                            'click .edit-btn': function (event, value, row, index) {
                                editGoods(row.id)
                            },
                            'click .del-btn': function (event, value, row, index) {
                                var ids = []
                                ids.push(row.id)
                                batchDel(ids)
                            }
                        }
                    }
                ],
                rowStyle: function (row, index) {
                    var classesArr = ['success', 'info'];
                    var strclass = "";
                    if (index % 2 === 0) {//偶数行
                        strclass = classesArr[0];
                    } else {//奇数行
                        strclass = classesArr[1];
                    }
                    return {classes: strclass};
                },//隔行变色
                responseHandler:function(res) {
                    return {
                        "total": res.total,//总页数
                        "rows": res.data   //数据
                    };
                },
                onLoadSuccess: function(){  //加载成功时执行
                },
                onLoadError: function(){  //加载失败时执行

                },
                onClickCell:function(field, value, row, $element)
                {
                    if (field === "image"){
                        var url = row.image
                        showImage(url)
                    }
                }
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,    //params.limit,   页面大小
                offset: params.offset,
                testNum: 445,
                testNum1: 343
            };
            return temp;
        };
        return oTableInit;
    };

    // 操作按钮
    function btnGroup ()
    {
        let html =
            '<a class="btn btn-primary m-r-5 btn-xs edit-btn" href="#!" title="编辑"><i class="mdi mdi-pencil"></i></a>' +
            '<a href="#!" class="btn btn-danger btn-xs del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
        return html;
    }

    function showImage(url){
        $.confirm({
            title: '商品主图',
            content: '<img src="'+url+'">',
            animation: 'scale',
            animationClose: 'top',
            buttons: {
                '关闭': function() {}
            },
        });
    }

    function batchDel(ids){
        $.post("/itemParam/delItemParam",{ids:ids},function (res){
            var msg = "";
            if (res.code === 0){
                msg = "操作成功"
                $('#goods_table').bootstrapTable('refresh');
            }
            else{
                msg = res.msg
            }
            $.alert({
                title: '提示消息',
                content: msg,
                icon: 'mdi mdi-rocket',
                animation: 'scale',
                closeAnimation: 'scale',
                buttons: {
                    okay: {
                        text: '确认',
                        btnClass: 'btn-blue'
                    }
                }
            });
        })
    }

    function editGoods(id){
        parent.$(parent.document).data('multitabs').create({
            iframe : true,                        //指定为iframe模式，当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
            title : '编辑规格',                     //标题（可选），没有则显示网址
            url : '/itemParam/editItemParam?id='+id           //链接（必须），如为外链，强制为info页
        }, true);
    }

    function addParam(){
        parent.$(parent.document).data('multitabs').create({
            iframe : true,                        //指定为iframe模式，当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
            title : '新增规格参数',                     //标题（可选），没有则显示网址
            url : '/itemParam/addItemParam'
        }, true);
    }

    function batchDels(){
        var rows = $('#goods_table').bootstrapTable('getAllSelections');
        if (rows.length === 0){
            $.alert({
                title: '错误提示',
                icon: 'mdi mdi-alert',
                type: 'orange',
                content: '请选中后再操作',
            });
            return ;
        }
        var ids = []
        for (let i = 0; i < rows.length; i++) {
            ids.push(rows[i].id)
        }
        batchDel(ids)
    }

    var oTable = new TableInit();
    oTable.Init();
</script>
</body>
</html>